<template>
	<view class="user-info ">
		<form @submit="formSubmit">
			<view class="avatar">
				<view class="text">
					<text>头像:</text>
				</view>
				<view class="img">
					<image name="picker" :src="userInfo.avatar"></image>

				</view>
			</view>
			<view class="name">
				<view class="text">
					<text>昵称:</text>
				</view>
				<view class="conent">
					<input type="nickname" class="uni-input" placeholder="请输入昵称" name="name" :value="userInfo.nickName"
						@input="clearInput" />
					<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
				</view>
			</view>
			<view class="area-submit">
				<button type="primary" size="default" form-type="submit">确认</button>
			</view>
		</form>
		<button class="choose-avatar" open-type="chooseAvatar" @chooseavatar="getAvatar"></button>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from "vue"
	import {
		onLoad,
		onReady,
		onPageScroll,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		updateUserInfo,
		deleteOssFile
	} from "@/api/user.js"
	import {
		useUserInfoStore,
	} from "@/stores/modules/user.js"
	const userLoginInfo = useUserInfoStore();

	onReady(() => {
		// 获取用户信息
		userInfo.value = uni.getStorageSync("userInfo")
	})

	const userInfo = ref({})
	// 用户旧头像数据
	const imgData = ref([])


	// 表单项
	const showClearIcon = ref(false)
	const clearInput = (e) => {
		userInfo.value.nickName = e.detail.value
		if (userInfo.value.nickName > 0) {
			showClearIcon.value = true
		} else {
			showClearIcon.value = false
		}

	}
	const clearIcon = () => {
		userInfo.value.nickName = ""
		showClearIcon.value = false
	}

	// 获取微信头像
	const getAvatar = (e) => {
		const {
			avatarUrl
		} = e.detail;
		console.log("头像路径：", avatarUrl)
		// 进行头像上传
		uni.uploadFile({
			url: 'http://localhost:8081/api/XcxPageData/upload',
			filePath: avatarUrl,
			name: 'file',
			header: {
				'Content-Type': 'multipart/form-data',
				'satoken': userLoginInfo.tokenInfo
			},
			success: (uploadFileRes) => {
				console.log("上传成功：", uploadFileRes)
				// 将返回的图片地址赋值给头像
				userInfo.value.avatar = JSON.parse(uploadFileRes.data).filePath
				console.log("头像地址：", userInfo.value.avatar);
			},
		})
	}

	// 提交表单
	const formSubmit = (e) => {
		console.log("参数：", e)
		let formData = {
			nickName: e.detail.value.name,
			mpAvatar: userInfo.value.avatar,
			userId: userInfo.value.userId
		}
		updateUserInfo(formData).then((res) => {
			if (res.code == 200) {

				uni.showToast({
					title: "修改成功",
					icon: "success",
					duration: 500
				})

				// 头像信息改变了
				if (userInfo.value.avatar !== userLoginInfo.avatar) {
					// 删掉旧头像
					let oldAvatar = userLoginInfo.avatar.split('/').pop();
					console.log("文件名：", oldAvatar);
					// 将数据加入数组中
					imgData.value.push(oldAvatar)
					if (oldAvatar) {
						console.log("删除成功", imgData.value)
						deleteOssFile(imgData.value)
					}
				}
				// 更新pinia
				userLoginInfo.avatar = userInfo.value.avatar
				userLoginInfo.nickName = userInfo.value.nickName

			}

			if (res.code == 500) {
				uni.showToast({
					title: "修改失败",
					icon: "error"
				})
				// 使用原来的数据
				userInfo.value.avatar = uni.getStorageSync("userInfo").avatar
				userInfo.value.nickName = uni.getStorageSync("userInfo").nickName

			}
		})

		// 更新本地缓存
		uni.setStorageSync("userInfo", userInfo.value)

		imgData.value = []

	}
</script>

<style lang="scss" scoped>
	.user-info {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		position: relative;

		.avatar {
			width: 670rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx auto;
			padding: 20rpx 0rpx;
			border-bottom: 1px solid #11110d;

			.text {
				height: 100%;
				background-color: #fff;
				display: flex;
				align-items: center;
				font-size: 20px;
				font-weight: bold;
			}

			.img {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				background-color: #fff;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}

		.name {
			width: 670rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx auto;
			padding: 20rpx 0rpx;
			border-bottom: 1px solid #11110d;

			.text {
				height: 100%;
				background-color: #fff;
				display: flex;
				align-items: center;
				font-size: 20px;
				font-weight: bold;
			}

			.conent {
				width: 400rpx;
				height: 100%;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.uni-input {
					width: 100%;
					height: 100%;
					background-color: #fff;
					font-size: 20px;
					text-align: right; // 新增

					&::placeholder {
						text-align: right;
					}

					&::-webkit-input-placeholder {
						text-align: right;
					}

					&::-moz-placeholder {
						text-align: right;
					}

					&:-ms-input-placeholder {
						text-align: right;
					}
				}
			}
		}

		.area-submit {
			margin-top: 200rpx;

			button {
				width: 400rpx;
			}
		}

		.choose-avatar {
			position: absolute;
			top: 20rpx;
			right: 40rpx;
			width: 150rpx;
			height: 150rpx;
			// 透明度
			opacity: 0;
		}
	}
</style>